<style>
.player-left {
  height: 480px;
  /*border: 1px solid #d7dde4;*/
  /*border-left: 0;*/
  background-color: #464c5b;
  overflow-y: auto;
}

.video-img {
  /*border-radius: 20px;*/
  /*margin-top: -5px;*/
  width: 72px;
  height: 48px;
  /*float: right;*/
}
</style>

<template>
  <div>
    <Row>
      <i-col span="20">
        <video-player 
          ref="videoPlayer" 
          :options="videoOptions" 
          @play="onPlayerPlay($event)" 
          @pause="onPlayerPause($event)" 
          @ended="onPlayerEnded($event)" 
          @waiting="onPlayerWaiting($event)" 
          @playing="onPlayerPlaying($event)" 
          @timeupdate="onPlayerTimeupdate($event)" 
          @canplay="onPlayerCanplay($event)" 
          @canplaythrough="onPlayerCanplaythrough($event)" 
          @ready="playerReadied" 
          @statechanged="playerStateChanged($event)"
        />
      </i-col>
      <i-col 
        span="4" 
        style="height: 100%;"
      >
        <div 
          class="player-left" 
          dis-hover
        >
          <Menu 
            :active-name="playing" 
            theme="dark" 
            mode="vertical" 
            style="width: 100%;" 
            @on-select="handleselect"
          >
            <Menu-item 
              v-for="item in playList" 
              :key="item.index" 
              :name="item.index" 
              class="ivu-menu-item-v"
            >
              {{ item.name }}
              <br>
              <img 
                :src="imgSrc(item.img)" 
                class="video-img"
              >
            </Menu-item>
          </Menu>
        </div>
      </i-col>
    </Row>
  <!--<chat v-if="chat" :roomid="videoOptions.sources[0].name"></chat>-->
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';

//  import 'videojs-flash'
//  window.videojs.options.sw
//  console.log(videoPlayer.player)
//  window.videojs.options.flash.swf=SWF_PATH
import { V_ROOT } from '@/api/config';
import api from '@/api';
//  import chat from '../chat/chat.vue'
//  import Chat from '../../api/wsclient'
export default {
  components: {
    videoPlayer
    //      chat
  },
  props: {
    playList: {
      type: Array,
      default () {
        return [];
      }
    },
    isLIve: {
      type: Boolean,
      default () {
        return false;
      }
    }
  },
  data: function () {
    return {
      wtime: null,
      //        canchat: false,
      playing: 0,
      videoOptions: {
        language: 'zh-CN',
        sources: [],
        live: true,
        height: 480,
        //          poster: '',
        autoplay: true
      }
    };
  },
  computed: {
    player () {
      //        this.$refs.videoPlayer.player.options.flash.swf=SWF_PATH

      return this.$refs.videoPlayer.player;
    },
    getRoom () {
      if (this.isLive) {
        return false;
      }
      if (this.playList && this.playList.length > 0) {
        //          this.playing = 0
        return true;
      } else {
        return false;
      }
    },
    getOptions () {
      return this.videoOptions;
    }
  },

  mounted () {
    //      this.handleselect(0)
  },

  beforeDestroy () {
    this.vidhis();

    // this.onPlayerPause(this.player)
  },
  methods: {
    imgSrc (data) {
      return V_ROOT + '/' + data;
    },
    handleselect (name) {
      //        Chat.logout()
      if (this.videoOptions.sources[0]) {
        this.vidhis();
      }
      let md = String(name);
      console.log(name);
      this.playing = md;
      this.videoOptions.sources = [];
      this.videoOptions.sources[0] = this.playList[name];
      console.log(this.player);
      //        this.player.options.flash.swf=SWF_PATH
      this.$api.VideoWatch(this.videoOptions.sources[0]);
      //        this.canchat = true
    },
    handleopen (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleclose (key, keyPath) {
      // console.log(key, keyPath);
    },

    // listen event
    onPlayerPlay (player) {
      // console.log('player play!', player)
    },
    onPlayerPause (player) {
      this.vidhis();
    },
    onPlayerEnded (player) {
      // console.log('player ended!', player)
      this.vidhis();
      let cont = this.playList.length;
      let i = Number(this.playing);
      if (i < cont - 1) {
        this.handleselect(i + 1);
      } else {
        this.handleselect(0);
      }
    },
    onPlayerLoadeddata (player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting (player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying (player) {
      this.wtime = new Date();
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate (player) {
      //         console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay (player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough (player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged (playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied (player) {
      // console.log('example 01: the player is readied', player)
    },
    // 上传观看记录
    vidhis () {
      let ct = new Date();
      let ret = this.videoOptions.sources[0];
      if (this.wtime) {
        ret.times = (ct.getTime() - this.wtime.getTime()) / 1000;
        ret.vtype = 2;
        //        this.wtime=ct
        // console.log('player pause!', player)
        this.$api.watchhistory(ret);
        console.log('vidhis', this.player);
      }
    }
  }
};
</script>
